<template>
  <div>
    <div @click="onLoadData">点击加载数据</div>
    <div @click="onLoadEmptyData">加载到的数据为空</div>
  </div>
  <div style="height: 240px">
    <ChartView ref="chartViewRef"></ChartView>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const chartViewRef = ref()

const option = {
  /**
   * 数据为空时(初始时显示title)
   */
  title: {
    show: true,
    text: '暂无数据',
    x: 'center',
    y: 'center',
    textStyle: {
      color: 'red',
      fontSize: 14,
      fontWeight: 'normal',
    },
  },
  /**
   * x坐标轴配置
   */
  xAxis: {
    /**
     * 坐标轴类型
     * 'value' 数值轴，适用于连续数据。
     * 'category' 类目轴，适用于离散的类目数据。
     * 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
     * 'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
     */
    type: 'category',
  },
  /**
   * y坐标轴配置
   */
  yAxis: {
    type: 'value',
  },
  /**
   * 图表配置
   */
  series: [
    {
      name: 'firstSeries',
      /**
       * 图表类型
       */
      type: 'bar',
    },
  ],
}

onMounted(() => {
  chartViewRef.value.setOption(option)
  chartViewRef.value.showLoading()
})
function onLoadEmptyData() {
  chartViewRef.value.hideLoading()
}
function onLoadData() {
  chartViewRef.value.hideLoading()
  chartViewRef.value.setOption({
    /**
     * 加载到了数据之后,不显示title
     */
    title: {
      show: false,
    },
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    series: [
      {
        name: 'firstSeries',
        data: [120, 200, 150, 80, 70, 110, 130],
      },
    ],
  })
}
</script>
